<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>XXX-首页</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
  <link rel="stylesheet" href="public/main.css">
</head>

<body>
  <header>
    <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top shadow-sm">
      <div class="container">
        <a class="navbar-brand" href="#"><img src="public/images/logo.jpg" alt="XXX"></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item ms-5">
              <a class="nav-link active" aria-current="page" href="#">导航条项目</a>
            </li>
            <li class="nav-item mx-3">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown mx-3">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
                aria-expanded="false">
                Dropdown
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
              </ul>
            </li>
            <li class="nav-item mx-3">
              <a class="nav-link disabled">Disabled</a>
            </li>
          </ul>
          <form class="d-flex">
            <button class="btn btn-outline-support animate__animated animate__pulse animate__infinite"
              type="submit">支持我们！</button>
          </form>
        </div>
      </div>
    </nav>

  </header>
  <main>
    <!-- 焦点图 -->
    <div class="slide container-fluid">
      <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
            aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
            aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
            aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img
              src="https://images.unsplash.com/photo-1626515405452-9728f8d67d39?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80"
              class="d-block w-100" alt="图片说明文字">
            <div class="carousel-caption d-none d-md-block">
              <h5>焦点图标题</h5>
              <p>图片更加详细的说明信息，图片更加详细的说明信息，图片更加详细的说明信息，</p>
            </div>
          </div>
          <div class="carousel-item">
            <img
              src="https://images.unsplash.com/photo-1632137176431-9d28a6485fbe?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1035&q=80"
              class="d-block w-100" alt="图片说明文字">
            <div class="carousel-caption d-none d-md-block">
              <h5>Second slide label</h5>
              <p>Some representative placeholder content for the second slide.</p>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
          data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
          data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>
    <!-- 活动信息 -->
    <div class="container mt-5" id="pb-act">
      <h3 class="text-center mb-3 fs-1">近期活动</h3>
      <div class="row mb-5 border rounded p-3 animate__animated animate__fadeIn animate__delay-05s">
        <div class="col-md-3"><img src="public/images/grandmother.jpg" alt="huodongxinxi"></div>
        <div class="col-md-6">
          <h4>具体活动标题</h4>
          <ul class="list-unstyled lh-base">
            <li><i class="bi bi-calendar-range"></i>2021年10月11日16:32:20</li>
            <li><i class="bi bi-geo-alt"></i>开始地点开始地点开始地点</li>
            <li><i class="bi bi-geo-alt-fill"></i>结束地点结束地点结束地点</li>
          </ul>
          <p>活动详细信息活动详细信息活动详细信息活动详细信息活动详细信息</p>
        </div>
        <div class="col-md-3">
          <button type="button" class="btn btn-danger">我要参加</button>
        </div>
      </div>
      <div class="row mb-5 border rounded p-3 animate__animated animate__fadeIn animate__delay-1s">
        <div class="col-md-3"><img src="public/images/grandmother.jpg" alt="huodongxinxi"></div>
        <div class="col-md-6">
          <h4>具体活动标题</h4>
          <ul class="list-unstyled lh-base">
            <li><i class="bi bi-calendar-range"></i>2021年10月11日16:32:20</li>
            <li><i class="bi bi-geo-alt"></i>开始地点开始地点开始地点</li>
            <li><i class="bi bi-geo-alt-fill"></i>结束地点结束地点结束地点</li>
          </ul>
          <p>活动详细信息活动详细信息活动详细信息活动详细信息活动详细信息</p>
        </div>
        <div class="col-md-3">
          <button type="button" class="btn btn-danger">我要参加</button>
        </div>
      </div>
      <div class="row mb-5 border rounded p-3 animate__animated animate__fadeIn animate__delay-15s">
        <div class="col-md-3"><img src="public/images/grandmother.jpg" alt="huodongxinxi"></div>
        <div class="col-md-6">
          <h4>具体活动标题</h4>
          <ul class="list-unstyled lh-base">
            <li><i class="bi bi-calendar-range"></i>2021年10月11日16:32:20</li>
            <li><i class="bi bi-geo-alt"></i>开始地点开始地点开始地点</li>
            <li><i class="bi bi-geo-alt-fill"></i>结束地点结束地点结束地点</li>
          </ul>
          <p>活动详细信息活动详细信息活动详细信息活动详细信息活动详细信息</p>
        </div>
        <div class="col-md-3">
          <button type="button" class="btn btn-danger">我要参加</button>
        </div>
      </div>
    </div>
    <!-- 会员信息 -->
    <div class="container my-5 position-relative" id="member">
      <h3 class="text-center fs-1 position-relative">会员</h3>
      <p class="title-bg position-absolute">BECOME A MEMBER</p>
      <div class="row">
        <div class="col-md-4">
          The concern was: How should our church associate with those who are born once
          again, and likewise deeply devoted to the Holy bible in addition to Christ, yet are not yet
          motivated that their child baptism is unbiblical also nullify? Should such followers be admitted in
          some cases to subscription at Bethlehem? Or to put the concern in the bigger standard ways: Should
          the front door of the neighborhood church be approximately the very same dimension as the door to
          the global body of Christ?
        </div>
        <div class="col-md-4">The concern was: How should our church associate with those who are born once
          again, and likewise deeply devoted to the Holy bible in addition to Christ, yet are not yet
          motivated that their child baptism is unbiblical also nullify? Should such followers be admitted in
          some cases to subscription at Bethlehem? Or to put the concern in the bigger standard ways: Should
          the front door of the neighborhood church be approximately the very same dimension as the door to
          the global body of Christ?</div>
        <div class="col-md-4">The concern was: How should our church associate with those who are born once
          again, and likewise deeply devoted to the Holy bible in addition to Christ, yet are not yet
          motivated that their child baptism is unbiblical also nullify? Should such followers be admitted in
          some cases to subscription at Bethlehem? Or to put the concern in the bigger standard ways: Should
          the front door of the neighborhood church be approximately the very same dimension as the door to
          the global body of Christ?</div>
      </div>
    </div>
    <!-- 联系信息 -->
    <div class="container-fluid" id="contact-info">
      <div class="container py-5">
        <div class="row">
          <div class="col-md-4 text-center">
            <h3 class="qr">扫码关注</h3>
            <p><img src="public/images/qrcode.bmp" alt=""></p>
          </div>
          <div class="col-md-4">
            <h3>联系我们</h3>
            <ul class="list-unstyled lh-lg">
              <li>白银市白银区建设西路9号</li>
              <li>(123) 456-78910 - (321) 199-3265</li>
              <li>info@example.com</li>
              <li>www.example.com</li>
            </ul>
          </div>
          <div class="col-md-4">
            <h3>友情链接</h3>
            <ul class="list-unstyled lh-lg two-cols">
              <li><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                  class="bi bi-chevron-right" viewBox="0 0 16 16">
                  <path fill-rule="evenodd"
                    d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
                </svg>白银市白银区建设西路9号</li>
              <li><img src="public/images/piggy-bank.svg" alt="">(123) 456-78910 </li>
              <li><i class="bi-alarm"></i>info@example.com</li>
              <li>www.example.com</li>
              <li>白银市白银区建设西路9号</li>
              <li>(123) 456-78910 </li>
              <li>info@example.com</li>
              <li>www.example.com</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </main>
  <footer class="container-fluid bg-black">
    <p class="text-center">© Copyright 2020 - <a href="#">白银市义工联合会</a> - All Rights Reserved</p>
  </footer>
  <!-- <div id="va-demo" class="container-fluid d-table">
    <p class="text-center d-table-cell align-middle">© Copyright 2020 - 白银市义工联合会 - All Rights Reserved</p>
  </div> -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
    crossorigin="anonymous"></script>
</body>

</html>
